<%--
  Created by IntelliJ IDEA.
  User: Tang'ya'kang
  Date: 2023/6/14
  Time: 12:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Only_Book</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container {
            /*border-radius: 5%;*/
            /*box-shadow: 0 5px 10px #666;*/
            width: 100%;
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        .slider-container {
            border-radius: 1%;
            box-shadow: 0 5px 10px #666;
            width: 500px;
            float: left;
            margin-right: 50px;
        }

        img{
            border-radius: 3%;
            padding: 5px;
        }

        .content-container {
            border-radius: 1%;
            box-shadow: 0 5px 10px #666;
            flex: 1;
            /* 可以使用 flex 属性将右侧容器自适应剩余宽度 */
        }
    </style>
<%--    <script>--%>
<%--        var bookSaleImagList=<c:forEach items="${requestScope.BookbySales}" var="book.img_path" varStatus="it" begin="1" end="3">--%>
<%--        var imgList = document.getElementsByTagName('img'); // 获取所有img元素--%>
<%--        for(var i = 0; i < imgList.length; i++) {--%>
<%--            var img = imgList[i];--%>
<%--            var oldSrc = img.getAttribute('src');--%>
<%--            var newSrc = oldSrc.replace('old/path', 'new/path'); // 新的图片路径--%>
<%--            img.setAttribute('src', newSrc); // 替换图片路径--%>
<%--        }--%>
<%--    </script>--%>
</head>
<body>
<%@ include file="head.jsp"%>

<div class="container">

    <div class="slider-container">
        <h4 class="card-title" align="center">欢迎使用 Only_Book 书城</h4>
        <!-- 这里放置轮播图 -->
        <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="Images/image1.jpg" alt="First slide" width="500px" height="300px">
                    <div class="container">
                        <div class="carousel-caption">
<%--                            <h1>Example headline.</h1>--%>
<%--                            <p>Some representative placeholder content for the first slide.</p>--%>
<%--                            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>--%>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="Images/image2.jpg" alt="Second slide" width="500px" height="300px">
                    <div class="container">
                        <div class="carousel-caption">
<%--                            <h1>Another example headline.</h1>--%>
<%--                            <p>Some representative placeholder content for the second slide.</p>--%>
<%--                            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>--%>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="Images/image3.jpg" alt="Third slide" width="500px" height="300px">
                    <div class="container">
                        <div class="carousel-caption">
<%--                            <h1>Third example headline.</h1>--%>
<%--                            <p>Some representative placeholder content for the third slide.</p>--%>
<%--                            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>--%>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
        <div><img src="Images/Websitetrafficstatisticstable.jpg" alt="Third slide" width="500px" height="300px"></div>
    </div>

    <div class="content-container">
        <h4 class="card-title" align="center">销 量 排 行 榜</h4>
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">商品名称</th>
                    <th scope="col">商品销量</th>
                </tr>
                </thead>
                <c:forEach items="${requestScope.BookbySales}" var="book" varStatus="it">
                    <tbody>
                    <tr>
                        <th scope="row">${it.count}</th>
                        <td>${book.name}</td>
                        <td>${book.sales}</td>
                    </tr>
                    </tbody>
                </c:forEach>
                <tbody>
                <tr>
                    <th scope="row"></th>
                    <td></td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
</div>
</div>
<div style="position: relative;top: 710px"><%@ include file="./Foot.jsp"%></div>
</body>
</html>